<script setup>
import { ControlButton, Controls } from '@vue-flow/controls';
import { useVueFlow } from '@vue-flow/core';
import { defineEmits } from 'vue';
import ControlsIcon from '../icon/ControlsIcon.vue';

const emit = defineEmits(['updateInteractionControls'])

const { 
  setViewport, 
  toObject,
  fromObject,
  getNodes,
} = useVueFlow()

const el = ref('')
const format = ref(false)
const interactionControls = ref(false)
const resCode = ref(0)
const flowIndex = ref(0)
const flowKey = 'ivy-flow-' + flowIndex.value

const getParams = () => {
  const data = toObject()

  data.format = format.value
  
  return data
}

const toEL = async () => {
  const res = await $ivyApi.post('/liteflow/parser/build', getParams())

  el.value = res.data
  resCode.value = res.code
}

function updatePos() {
  for (const node of getNodes.value) {
    node.position = {
      x: Math.random() * 400,
      y: Math.random() * 400,
    }
  }
}

function resetTransform() {
  setViewport({ x: 0, y: 0, zoom: 1 })
}

watch(interactionControls, val => {  
  emit('updateInteractionControls', val)
})

function onSave() {
  localStorage.setItem(flowKey, JSON.stringify(toObject()))
}

function onRestore() {
  const flow = JSON.parse(localStorage.getItem(flowKey))

  if (flow) {
    fromObject(flow)
  }
}

const popupFlowJson = ref(false)
const flowJson = ref('')

const onJson = () => {
  flowJson.value = JSON.stringify(toObject(), null, 2)
  popupFlowJson.value = true
}

const onSetting = () => {

}
</script>

<template>
  <Controls position="top-right">
    <VsTooltip
      text="随机排列"
      position="left"
    >
      <ControlButton @click="updatePos">
        <ControlsIcon name="update" />
      </ControlButton>
    </VsTooltip>

    <VsTooltip
      text="重置缩放和平移"
      position="left"
    >
      <ControlButton @click="resetTransform">
        <ControlsIcon name="reset" />
      </ControlButton>
    </VsTooltip>

    <VsTooltip
      :text="interactionControls ? '显示交互控件' : '隐藏交互控件'"
      position="left"
    >
      <ControlButton @click="interactionControls = !interactionControls">
        <ControlsIcon
          v-if="interactionControls"
          name="adjustmentsOn"
        />
        <ControlsIcon
          v-else
          name="adjustmentsOff"
        />
      </ControlButton>
    </VsTooltip>

    <VsTooltip
      :text="format ? '格式化EL表达式' : 'EL表达式'"
      position="left"
    >
      <ControlButton @click="format = !format">
        <ControlsIcon
          v-if="format"
          name="format"
        />
        <ControlsIcon
          v-else
          name="noFormat"
        />
      </ControlButton>
    </VsTooltip>

    <VsTooltip
      text="生成EL表达式"
      position="left"
    >
      <ControlButton @click="toEL">
        <ControlsIcon name="log" />
      </ControlButton>
    </VsTooltip>

    <VsTooltip
      text="保存"
      position="left"
    >
      <ControlButton @click="onSave">
        <ControlsIcon name="save" />
      </ControlButton>
    </VsTooltip>

    <VsTooltip
      text="还原"
      position="left"
    >
      <ControlButton @click="onRestore">
        <ControlsIcon name="restore" />
      </ControlButton>
    </VsTooltip>

    <VsTooltip
      text="流程数据"
      position="left"
    >
      <ControlButton @click="onJson">
        <ControlsIcon name="code" />
      </ControlButton>
    </VsTooltip>

    <VsTooltip
      text="设置"
      position="left"
    >
      <ControlButton @click="onSetting">
        <ControlsIcon name="setting" />
      </ControlButton>
    </VsTooltip>
  </Controls>

  <VsPopup
    v-model:active="popupFlowJson"
    class="holamundo"
    title="流程数据"
  >
    <pre>{{ flowJson }}</pre>
  </VsPopup>

  <pre
    class="ivy-el-span"
    :class="resCode === 200 ? 'ivy-el-span-bg-success' : (resCode === 500 ? 'ivy-el-span-bg-error' : 'ivy-el-span-bg')"
  >{{ el }}</pre>
</template>

<style>
.ivy-el-span{
  position: absolute;
  z-index: 4;
  display: inline-block;
  padding: 8px;
  border-end-end-radius: 6px;
  border-start-end-radius: 6px;
  font-size: 16px;
  inset-block-end: 0;
}

.ivy-el-span-bg{
  background-color: transparent;
}

.ivy-el-span-bg-default{
  background-color: #d3d3d3;
}

.ivy-el-span-bg-success{
  background-color: #28c76f;
  color: #fff;
}

.ivy-el-span-bg-error{
  background-color: #ff4757;
}
</style>
